<!-- 动态组件 -->
<template>
    <div>
        <!-- 缓存组件 -->
        <keep-alive>
            <component :is="currentComponent"></component>
        </keep-alive>
        <button @click="toggleComponent">切换组件</button>
    </div>
</template>

<script>
import FirstComponent from "@/views/dynamicComponent/FirstComponent";
import SecondComponent from "@/views/dynamicComponent/SecondComponent";
export default {
    name: "DynamicComponent",
    components: {
        first:FirstComponent,
        second:SecondComponent
    },
    data() {
        return {
           currentComponent:'first',
        }
    },
    methods: {
        /**
         * 切换组件
         */
        toggleComponent(){
            this.currentComponent = this.currentComponent === 'first' ? 'second' : 'first';
        }
    }
}
</script>

<style scoped>

</style>
